<template>
  <div class="root">
    <el-form :model="ruleForm" status-icon ref="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="账号" prop="id">
        <el-input class="user" type="text" v-model="ruleForm.id" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input class="user" type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" v-loading.fullscreen.lock="loading">登录
        </el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { HttpGet, HttpPost } from '@/api/http'
export default {
  data() {
    var validateId = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    return {
      //遮蔽层
      loading: false,
      ruleForm: {
        id: '',
        pass: '',
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        id: [
          { validator: validateId, trigger: 'blur' }
        ]
      }
    };
  },
  async created() {
    // 绑定回车键
    let that = this
    document.onkeydown = function (e) {
      if (e.key == 'Enter') {
        that.submitForm('ruleForm');
      }
    }
  },
  methods: {
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) {
          this.$message.warning('请填写完整账号密码')
          return false;
        }
        try {
          this.loading = true;
          const res = await HttpPost({
            url: '/login',
            data: this.ruleForm
          })
          if (res.code == 200) {
            const user = res.data[0]
            sessionStorage.setItem('user', JSON.stringify(user))
            const name = user.name
            if (!user.permission) {
              this.$message.warning('无访问权限,请联系管理员');
              return
            }
            this.$router.push({
              path: '/main',
              query: { name }
            });
          } else {
            this.$message.error('登录出错,请检查账号密码');
            Object.assign(this.ruleForm, { id: '', pass: '' })
          }
        } finally {
          this.loading = false;
        }
      });
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-form {
  padding-top: 40px;
  padding-right: 80px;
  min-width: 309px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

>>>.el-form-item__label {
  color: #fff;
}

>>>.el-input__inner {
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
}

>>>.el-button--primary {
  background-color: rgba(0, 0, 0, 0);
  color: #409eff;
}

>>>.el-button--default {
  background-color: rgba(0, 0, 0, 0);
}

>>>.el-button--default:hover {
  color: #f56c6c;
}

.el-button--default {
  margin-left: 60px;
}
</style>
